<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />   
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    <title>城市首页数据看板</title>
<style type="text/css">
    .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
        padding: 4px 2px;
        font-size:10px;
        vertical-align: middle;      
    }
</style>
    <meta charset="UTF-8">
    <title>城市首页数据看板</title>
</head>
<body>
<div class="container-fluid">

    <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
                <form class="form-inline" action="$!{__beat.server.contextPath}/homePage/info" method="get">
                        <div class="form-group" style="width:180px">
                            <label for="cityName" style="padding-left:15px;">城市：</label>
                            <select id="cityName"  name="cityName" class="form-control">
                                 #foreach($c in $zhixiaoCityList)
                                    #if($velocityCount > 2)
                                    <option value="$c" #if("$!{cityName}" == "$c") selected #end>$c</option>
                                    #end
                                #end
                            </select>
                        </div>  
                        <div class="form-group" style="width:180px">
                            <label for="businessName" style="padding-left:15px;">业务线：</label>
                            <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                               #foreach($buss in $businessList)
                               #set($businessName_CN = $business_CN_Map.get("$buss"))
                                    <option value="$businessName_CN" #if("$!businessName" == "$!businessName_CN") selected #end>$businessName_CN</option>
                                #end
                            </select>
                        </div>  
                        <div class="form-group">                       
                               <input type="submit" value="查询" class="btn btn-primary btn-xs"> 
                        </div>
                </form>
    </div>
    
    
     <!-- 信息量变化趋势 -->

		<div class="datacontent" id="qsContent">
			<div class="dataTit">
				<i class="mark"></i><span>$!{cityName}$!{businessName} - 信息量变化趋势</span>
			</div>

			<div class="dataShow">
				<div id='infoOption' statType='day'>
					<div class="form-inline">
						<div class="form-group input-group input-group-sm"
							style="width: 20%; float: left">
							<span class="input-group-addon"> <input
								id="time_checkbox_info" type="checkbox">
							</span> <input id="time_input_info" type="text"
								class="form-control time" placeholder="添加对比" disabled>
						</div>
						<div class="form-group input-group-sm col-md-offset-1">
							<label for="cateName">类别：</label> <select id="cateName"
								class="form-control" style="width: 130px;">
                                <option value="all">全部</option> 
                                #foreach($c in $cateList)
								<option value="$c">$c</option> #end
							</select>
						</div>
						<div class="form-group input-group-sm ">
                            <label for="proType">信息类型：</label>
							<select id="proType" class="form-control"
								style="width: 120px; margin-left: 5px">
								<option value="valid_add">新增</option>
								<option value="valid_update">修改</option>
								<option value="setup_rep">设置</option>
							</select>
						</div>
						<button id="infoBtn" type="button" class="btn btn-default form-control input-sm">刷新</button>

						<div class="btn-group btn-group-sm btn-tab" style="float: right">
							<button type="button" class="btn btn-default active btn_info"
								statType='day'>日</button>
							<button type="button" class="btn btn-default btn_info"
								statType='week'>周</button>
							<button type="button" class="btn btn-default btn_info"
								statType='month'>月</button>
						</div>
					</div>
				</div>

				<div>
					<div id="info_line1" style="height: 290px;"></div>
					<div id="info_line2" style="height: 290px;"></div>
				</div>

				<div class="panel-group accordion" id="infoPanel">
					<div class="panel panel-default open">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse"
									data-parent=".accordion" href="#collapse_info"> 信息量(点击展开) <span
									id="infoTotalTable_date"></span>
								</a>
							</h4>
						</div>
						<div id="collapse_info" class="panel-collapse collapse"
							style="height: 0px;">
							<div class="panel-body">
								<table class="table table-bordered" id="infoTotalTable">
									<thead>
										<tr>
											<th style="text-align: center">用户类型</th>
											<th style="text-align: center">有效信息量</th>
											<th style="text-align: center">有效信息量环比</th>
											<th style="text-align: center">有效信息人数</th>
											<th style="text-align: center">有效信息人数环比</th>
										</tr>
									</thead>

								</table>
							</div>
						</div>
					</div>

				</div>

			</div>
			<!-- dataShow  -->
		</div>
		<!-- datacontent  -->
		<!-- 信息量变化趋势 -->

		<!--新增简历趋势 -->
      #if ($!{businessName}=="招聘")
		 <div class="datacontent" id="qsContent">
			<div class="dataTit">
				<i class="mark"></i><span>$!{cityName}$!{businessName} - 新增简历趋势</span>
			</div>

			<div class="dataShow">
				<div id='resumeOption' statType='day'>
					<div class="form-inline">
						<div class="form-group input-group input-group-sm"
							style="width: 20%; float: left">
							<span class="input-group-addon"> <input
								id="time_checkbox_resume" type="checkbox">
							</span> <input id="time_input_resume" type="text"
								class="form-control time" placeholder="添加对比" disabled>
						</div>

						<div class="form-group input-group-sm col-md-offset-1">
							<label for="Resumecate">期望职位:</label>
                            <select id="Resumecate" class="form-control" style="width: 130px">
                                <option value="all">全部</option>
								#foreach($c in $cateList)
								   <option value="$c">$c</option> 
								#end
							</select>
						</div>

						<div class="form-group input-group-sm ">
                             <label for="resumeProType">信息类型：</label>
							<select id="resumeProType" class="form-control"
								style="width: 120px; margin-left: 5px">
								<option value="add">新增有效</option>
								<option value="update">更新有效</option>
							</select>
						</div>
                        <button id="refreshResumeCate_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

						<div class="btn-group btn-group-sm btn-tab" style="float: right">
							<button type="button" class="btn btn-default active btn_resume"
								statType='day'>日</button>
							<button type="button" class="btn btn-default btn_resume"
								statType='week'>周</button>
							<button type="button" class="btn btn-default btn_resume"
								statType='month'>月</button>
						</div>
					</div>
				</div>

				<div style="margin-top: 30px">
					<div id="newResume" style="height: 320px;"></div>
				</div>

				<div class="panel-group accordion" id="resumePanel">
					<div class="panel panel-default open">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse"
									data-parent=".accordion" href="#collapse_resume">
									新增简历(点击展开) <span id="resumeTotalTable_date"></span>
								</a>
							</h4>
						</div>
						<div id="collapse_resume" class="panel-collapse collapse"
							style="height: 0px;">
							<div class="panel-body">
								<table class="table table-bordered" id="resumeTotalTable">
									<thead>
										<tr>
											<th>类别</th>
											<th>新增简历人数</th>
											<th>环比</th>
											<th>新增简历量</th>
											<th>环比</th>
										</tr>
									</thead>

								</table>
							</div>
						</div>
					</div>

				</div>


			</div>
			<!-- dataShow  -->
		</div>
		<!-- datacontent  -->
		<!-- 新增趋势 -->
      #end
    

<!-- 销售业绩部分  -->
   #if($!{businessName} != '二手创新' && $!{businessName} != '二手推广')
        <div class="datacontent" id="qsContent">
            <div class="dataTit">
                <i class="mark"></i><span>$!{cityName}$!{businessName} - 销售业绩情况</span>
            </div>
 
            <div class="dataShow">
                <div id='salesPerformanceOption' statType='month'>
                    <form class="form-inline">
                        <div  class="form-group input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_salesPerformance" type="checkbox">
                            </span>
                            <input id="time_input_salesPerformance" type="text" class="form-control time" placeholder="添加对比" disabled>
                        </div>

                        <div class="form-group input-group-sm col-md-offset-1">
                            <label for="teamType_salesPerformance">团队类型：</label>
                            <select id="teamType_salesPerformance" class="form-control  input-sm">              
                                <option value="新签团队">新签团队</option>
                                <option value="续费团队">续费团队</option>
                            </select>
                        </div>

                        <div class="form-group input-group-sm">
                            <label for="pfmType_salesPerformance">业绩类型：</label>
                            <select id="pfmType_salesPerformance" class="form-control  input-sm">              
                                <option value="total_pfm">总业绩</option>
                                <option value="avg_pfm">人均总业绩</option>
                                <option value="open_pfm">开通业绩</option>
                                <option value="wlt_pfm">会员业绩</option>
                                <option value="bid_pfm">推广业绩</option>
                                <option value="blc_pfm">余额业绩</option>
                                <option value="package_blc_pfm">打包业绩</option>
                                <option value="no_package_blc_pfm">单售业绩</option>
                                <option value="wlt_new_pfm">新签业绩</option>
                                <option value="wlt_renew_pfm">续费业绩</option>
                            </select>
                        </div>
                        <button id="refresh_salesPerformance_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                        <!-- <div class="btn-group btn-group-sm btn-tab" style="float: right">
                            <button type="button" class="btn btn-default active btn_salesPerformance" statType='day'>日</button>
                            <button type="button" class="btn btn-default btn_salesPerformance" statType='week'>周</button>
                            <button type="button" class="btn btn-default btn_salesPerformance" statType='month'>月</button>
                        </div> -->
                    </form>
                </div>

                <div>
                    <div id="salesPerformance_pfm" style="height:270px;"></div> 
                    <div id="salesPerformance_count" style="height:270px;"></div>
                </div>

                <div class="panel-group accordion" id="accordion">
                    <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapse_salesPerformance">
                                    销售业绩(点击展开) <span id="salesPerformanceTable_date"></span>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse_salesPerformance" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <table class="table table-bordered" id="salesPerformanceTable">

                                    </table>
                                </div>
                            </div>
                    </div>
                   
                </div>
            </div><!-- dataShow  -->
        </div> <!-- datacontent  -->
    #end

<!-- 销售业绩部分 结束  -->

<!-- 续费率部分  -->
 
        <div class="datacontent" id="qsContent">
            <div class="dataTit">
                <i class="mark"></i><span>$!{cityName}$!{businessName} - 续费数据情况</span>
            </div>
 
            <div class="dataShow">
                <div id='rechargeOption' statType='month'>
                    <form class="form-inline">
                        <div  class="form-group input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_recharge" type="checkbox">
                            </span>
                            <input id="time_input_recharge" type="text" class="form-control time" placeholder="添加对比" disabled>
                        </div>
  
                        <div class="form-group input-group-sm col-md-offset-1">
                            <label for="indexType_recharge">会员类型：</label>
                            <input type="hidden" name="indexType_recharge" id="indexType_recharge" value="$!indexType_recharge" />
                            <select multiple="multiple"  id="indexType_recharge_mul" class="form-control  input-sm" style="width:180px;">              
                                <option value="in_service" selected="selected">服务中会员数</option>
                                <option value="new_service" selected="selected">新签会员数</option>
                                <option value="recharge_service" >续费会员数</option>
                                <option value="end_service" >到期会员数</option>                  
                            </select>  
                        </div>

                        <button id="refresh_recharge_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                    </form>
                </div>

                <div>
                    <div id="recharge_member" style="height:270px;"></div>
                    <div id="recharge_rate" style="height:270px;"></div>
                </div>

                <div class="panel-group accordion" id="accordion">
                    <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapse_recharge">
                                    续费数据(点击展开) <span id="recharge_date"></span>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse_recharge" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <table class="table table-bordered" id="rechargeTable">
                                        <thead>
                                          <tr>
                                            
                                            <th>服务中会员数</th>
                                            <th>环比</th>
                                            <th>到期会员数</th>
                                            <th>环比</th>
                                            <th>续费会员数</th>
                                            <th>环比</th>
                                            <th>新签会员数</th>
                                            <th>环比</th>
                                            <th>续费率</th>
                                            <th>环比</th>
                                          </tr>
                                        </thead>

                                    </table>
                                </div>
                            </div>
                    </div>
                   
                </div>
            </div><!-- dataShow  -->
        </div> <!-- datacontent  -->
 
<!-- 续费率 结束  -->

</div>
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css" type="text/css" /> 
<link type="text/css" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css" rel="stylesheet" />
<script src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>

<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/dist/echarts.js"></script>
<script src="$!{__beat.server.contextPath}/js/common/chart-util.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">

    function changeDateGrp(item){
        var stat_type = $(item).attr('statType');
        var curDiv = $(item).closest('div[statType]');
        $(curDiv).attr('statType',stat_type);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[statType]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });
   
 
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/homePage"}});
    
    var charts = [];

    #if($!{businessName} != '二手创新' && $!{businessName} != '二手推广')
        require(['dashboard/sales_v1'],function(salesEC){
            charts.push(salesEC);
            salesEC.show(2);
        });
    #end

     require(['dashboard/recharge_v2'],function(rechargeEC){
        charts.push(rechargeEC);
        rechargeEC.show(2);
    });

   //信息量变化趋势
     require(['dashboard/info_v1'],function(infoEC){
         charts.push(infoEC);
         infoEC.show(2);
     });
     
     //新增简历变化趋势
     require(['dashboard/newResume_v1'],function(newResumeEC){
     	 charts.push(newResumeEC);
     	 newResumeEC.show(2);
     });

    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.resize();
        });
    });


</script>
</html>